<template>
	<view class="diy-seckill home-act-list component-diy" :style="marginStyle">
		<view class="box" :style="boxStyle">
			<view class="home-act-list-left">
				<view class="home-act-list-title-box">
					<text class="home-act-list-title" :style="titleStyle">{{componentData.title?componentData.title:'秒杀'}}</text>
				</view>
				<text class="home-act-list-left-tips">{{componentData.desc}}</text>
				<view class="home-act-list-btn" @click="toSeckill">
					<button size="mini" hover-class="none" class="button" :style="computeButtonStyle">{{componentData.buttonText}}
						<uni-icons type="arrowright" :color="componentData.buttonTextColor" size="12"></uni-icons>
					</button>
				</view>
			</view>
			<block v-for='(item, index) in seckill_list' :key='index'>
				<view v-if='item.id > 0' class="home-act-list-item" @click="toSeckilldetail(item.id)">
					<view class="home-act-list-item-img">
						<image mode='aspectFill' :src='item.goods_img' :style="imageStyle"></image>
					</view>
					<view class="home-act-list-item-price" :style="priceStyle">￥{{item.spike_price}}</view>
				</view>
				<view v-else class="home-act-list-item">
					<view class="home-act-list-item-img home-empty-goods" :style="imageStyle">期待更多好货</view>
					<view class="home-act-list-item-price"></view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData', 'storeId'],
		data() {
			return {
				seckill_list: []
			}
		},
		watch: {
			'componentData.ids': {
				async handler() {
					if (this.componentData.ids.length == 0 && (this.componentData.customize)) {
						this.seckill_list = [{}, {}, {}];
						return false;
					}
					const res = await this.$request('SmallProgramApi/Diy/getSeckill', {
						ids: this.componentData.customize ? this.componentData.ids.slice(0, 3).join(',') : ''
					});
					if (res.status == 1) {
						const data = res.data;
						let items = {};
						for (const item of data) {
							items[item.id] = item;
						}

						this.seckill_list = [];
						if (this.componentData.customize) {
							let arrData = []
							for (const id of this.componentData.ids) {
								if (items[id]) {
									arrData.push(items[id])
								}
							}
							this.seckill_list = arrData.splice(0, 3)
						} else {
							if (data && data.length > 3) {
								let arr = data.splice(0, 3)
								this.seckill_list = arr
							} else {
								this.seckill_list = JSON.parse(JSON.stringify(data))
							}
						}

						const length = this.seckill_list.length;
						if (length < 3) {
							for (let i = length; i < 3; i++) {
								this.seckill_list.push({});
							}
						}
					}
				},
				immediate: true
			}
		},
		computed: {
			marginStyle() {
				let css = {
					'margin': '5px 15px',
					'padding': 0,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
					'margin-left': this.componentData.marginLR + 'px',
					'margin-right': this.componentData.marginLR + 'px',
				}
				return this.$joinStyle(css);
			},
			boxStyle() {
				let css = {
					'border-radius': this.componentData.borderRadius + 'px',
					'background-color': this.componentData.backgroundColor,
				}
				return this.$joinStyle(css);
			},
			computeButtonStyle() {
				const css = {
					'background-color': this.componentData.buttonColor,
					'border': `1px solid ${this.componentData.buttonBorderColor}`,
					'color': this.componentData.buttonTextColor
				}
				return this.$joinStyle(css);
			},
			titleStyle() {
				const css = {
					'color': this.componentData.titleTextColor
				};
				return this.$joinStyle(css);
			},
			imageStyle() {
				const css = {
					'border-radius': this.componentData.imgRadius + 'px'
				};
				return this.$joinStyle(css);
			},
			priceStyle() {
				const css = {
					'color': this.componentData.priceColor ? this.componentData.priceColor : '#fd633a'
				};
				return this.$joinStyle(css);
			},
		},
		methods: {
			//秒杀商品详情
			toSeckilldetail(id) {
				uni.navigateTo({
					url: '/pages/index/Seckill-purchase-details/Seckill-purchase-details?id=' + id + '&store_id=' +
						this.storeId,
				})
			},
			//秒杀首页
			toSeckill() {
				uni.navigateTo({
					url: '/pages/index/Seckill-purchase/Seckill-purchase',
				})
			}
		}
	}
</script>

<style lang="less">
	.diy-seckill.home-act-list {
		margin: 0 30rpx;
		padding: 10rpx 0;
		box-sizing: border-box;

		.flex-1 {
			flex: 1;
		}

		.box {
			padding: 11px 15px;
			background-color: white;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border-radius: 5px;
		}

		.home-act-list-left {
			width: 200rpx;
		}

		.home-act-list-title-box {
			display: flex;
			align-items: center;
		}

		.home-act-list-title {
			color: #333;
			font-size: 30rpx;
			line-height: 34rpx;
		}

		.home-act-list-time-box {
			display: flex;
			margin-left: 20rpx;
			align-items: center;
		}

		.home-act-list-time-his-con {
			display: flex;
			margin: 10rpx 0 0;
			align-items: center;
			font-size: 0;
			width: 204rpx;
			height: 34rpx;
			border: 1rpx solid #ff5c6d;
			box-sizing: border-box;
			border-radius: 6rpx;
			background-color: #ff5c6d;
			border-right: none;
		}

		.home-act-list-time {
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			background-color: #ff5c6d;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 20rpx;
			line-height: 32rpx;
		}

		.home-act-list-tag {
			width: 104rpx;
			height: 32rpx;
			margin: 2rpx 0 2rpx 20rpx;
		}

		.home-act-list-tag>image {
			width: 100%;
			height: 100%;
		}

		.home-act-list-time-box>text {
			color: #ff5c6d;
			line-height: 40rpx;
			font-size: 26rpx;
			padding: 0 4rpx;
		}

		.home-act-list-time-his-box>text {
			color: #ff5c6d;
			line-height: 30rpx;
			font-size: 22rpx;
			padding: 0 2rpx;
		}

		.home-act-list-time-day {
			color: #fff;
			font-size: 20rpx;
			border-top-left-radius: 6rpx;
			border-bottom-left-radius: 6rpx;
			line-height: 34rpx;
			width: 90rpx;
			text-align: center;
			height: 34rpx;
		}

		.home-act-list-time-his-box {
			width: 116rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #ff5c6d;
			border-radius: 6rpx;
			box-sizing: border-box;
			background-color: #fff;
			height: 34rpx;
		}

		.home-act-list-time-his {
			color: #ff5c6d;
			font-size: 20rpx;
			line-height: 32rpx;
		}

		.home-act-list-left-tips {
			color: #999;
			font-size: 22rpx;
			line-height: 28rpx;
			max-height: 28rpx;
			line-height: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;
			margin-top: 20rpx;
		}

		.home-act-list-btn {
			min-width: 118rpx;
			margin-top: 40rpx;

			.button {
				padding-left: 20rpx;
				padding-right: 20rpx;
				font-size: 22rpx;
				border: 1px solid rgb(200, 200, 200);
				line-height: 1.5;
				height: 40rpx;
				overflow: hidden;

				&::after {
					border: none;
				}
			}
		}

		.home-act-list-item {
			flex: 1;
			margin-left: 10rpx;
		}

		.home-act-list-big-item {
			width: 198rpx;
		}

		.home-act-list>.home-act-list-big-item:nth-child(2) {
			margin-right: 20rpx;
		}

		.home-act-list-item-img {
			width: 100%;
			height: 132rpx;
		}

		.home-act-list-item-img>image {
			width: 100%;
			height: 100%;
		}

		.home-act-list-item-price {
			font-size: 26rpx;
			color: #fd633a;
			text-align: center;
			line-height: 22rpx;
			margin-top: 15rpx;
			height: 22rpx;
		}

		.home-act-promotion {
			background: linear-gradient(to bottom, #ffedef, #fff);
		}

		.home-empty-goods {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f6f6f6;
			color: #aaa;
			font-size: 18rpx;
		}
	}
</style>
